<template>
  <div class="systemDeviceMigration">
    <MetaSearchForm @on-search="tableSearch">
      <el-form ref="systemDeviceMigration_form" :model="searchData" label-width="105px">
        <el-form-item label="设备序列号" class="systemDeviceMigration_formItem">
          <el-input v-model="searchData.sernumber" placeholder="请输入设备序列号" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户设备名称" class="systemDeviceMigration_formItem">
          <el-input v-model="searchData.equipmentname" placeholder="请输入用户设备名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="设备名称" class="systemDeviceMigration_formItem">
          <el-input v-model="searchData.alias" placeholder="请输入设备名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="主板编号" class="systemDeviceMigration_formItem">
          <el-input v-model="searchData.snid" placeholder="请输入主板编号" clearable></el-input>
        </el-form-item>
        <el-form-item label="客户" class="systemDeviceMigration_formItem">
          <el-select v-model="searchData.customerId" placeholder="请选择客户" clearable>
            <el-option
              v-for="item in customerList"
              :key="item.id"
              :label="item.customerName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </MetaSearchForm>
    <MetaPageTable
      ref="systemDeviceMigrationTable"
      class="systemDeviceMigration_table"
      table-title="设备管理"
      :need-checkbox="false"
      :is-auto-req="false"
      :display-item="displayItem"
      :table-data="equTableData"
      :line-btn-group="lineBtnGroup"
      @lineBtnClick="tableInlineBtnClick"
    />
  </div>
</template>


<script>
import MetaPageTable from '../components/MetaPageTable'
import MetaSearchForm from '../components/MetaSearchForm'
import deepClone from '../utils/deepClone'
export default {
  name: 'systemDeviceMigration',
  components: {
    MetaPageTable,
    MetaSearchForm
  },
  data () {
    return {
      searchData: {
        sernumber: '',
        equipmentname: '',
        snid: '',
        alias: '',
        customerId: ''
      },
      equTableData: {},
      searchDataForTable: {},
      displayItem: [
        {
          label: '设备序列号',
          prop: 'sernumber'
        },
        {
          label: '用户设备名称',
          prop: 'equipmentname'
        },
        {
          label: '设备名称',
          prop: 'alias'
        },
        {
          label: '主板编号',
          prop: 'snid'
        },
        {
          label: '环境',
          prop: 'platform',
          type: 'if',
          format: {
            'preProd': '预生产环境',
            'prod': '生产环境'
          },
          color: {
            'preProd': 'blue',
            'prod': 'green'
          }
        },
        {
          label: '设备类型',
          prop: 'equipment_type',
          type: "if",
          format: {
            '1': "浮标式设备",
            '2': "便携式设备",
            '3': "岸基式设备",
            '4': "管道式设备",
            '5': "潜入式设备",
          }
        },
        {
          label: '设备版本',
          prop: 'version'
        },
        {
          label: '客户',
          prop: 'customerName'
        },
        {
          label: '备注',
          prop: 'remark',
        },
      ],
      lineBtnGroup: [{
          id: 'toPreProd',
          title: '预生产环境',
          hideCheck: this.btnHidecheck
        },{
          id: 'toProd',
          title: '生产环境',
          hideCheck: this.btnHidecheck
        }
      ],
      customerList: [], //客户
      equipmentModelList: [] //设备型号
    }
  },
  created() {

  },
  mounted() {
    //获取客户列表
    this.getCustomerList()
    //获取设备型号列表
    this.getEquipmentModelList()
    this.initTableData(true)
  },
  methods: {
    initTableData(reflash) {
      let params = {}
      params = this.searchDataForTable
      params.page = 1
      params.limit = 9999999
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + 'admin/equipmentListOfNetty',
        method: "post",
        data: params
      }).then(res => {
        if (res.data.code === 200) {
          this.equTableData = res.data.result
          this.$nextTick(() => {
            this.$refs.systemDeviceMigrationTable.formDataInit(reflash)
          })
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    getCustomerList() {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + 'admin/customer',
        method: "post",
        data: {
          page: 1,
          limit: 99999999,
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.customerList = res.data.result.content
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    btnHidecheck(rowData, item) {
      if(rowData.platform == 'preProd' && item.id === 'toProd') {
        return true
      }
      if(rowData.platform == 'prod' && item.id === 'toPreProd') {
        return true
      }
      return false
    },
    tableInlineBtnClick(item) {
      if (item.button === 'toPreProd') {
        this.$confirm('是否确认将设备迁至预生产环境?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //切换到测试环境
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "admin/changeTestNetty?id=" + item.rows.id + '&snid=' + item.rows.snid,
            method: "post",
            data: {}
          }).then(res => {
            if (res.data.code === 200) {
              this.$notify.success({
                title: "操作成功",
                message: res.data.message,
              });
            }else {
              this.$notify.error({
                title: '错误',
                message: res.data.message
              });
            }
          })
        })
      }else if(item.button === 'toProd') {
        this.$confirm('是否确认将设备迁至生产环境?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //切换到生产环境
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "admin/changeProdNetty?id=" + item.rows.id + "&snid=" + item.rows.snid,
            method: "post",
            data: {}
          }).then(res => {
            if (res.data.code === 200) {
              this.$notify.success({
                title: "操作成功",
                message: res.data.message,
              });
            }else {
              this.$notify.error({
                title: '错误',
                message: res.data.message
              });
            }
          })
        })
      }
    },
    tableSearch() {
      this.searchDataForTable = deepClone(this.searchData)
      this.initTableData(true)
    },
    getEquipmentModelList() {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/EquipmentModel",
        method: "post",
        data: {
          page: 1,
          limit: 99999999
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.equipmentModelList = res.data.result.content
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })

    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.systemDeviceMigration{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
  overflow-y: scroll;
  .systemDeviceMigration_formItem {
    float: left;
  }
  .systemDeviceMigration_table {
    width: 100%;
    overflow-y: unset;
  }
  .equipTypeSelect {
    width: 100%;
  }
}
.alertPositionDialog_bg {
  height: 600px;
  .alertPositionDialog_header {
    width: 100%;
    height: 60px;
    float: left;
    display: flex;
    .alertPositionDialog_select {
      flex: 1;
    }
    .alertPositionDialog_selfPosition {
      width: 50px;
      padding-left: 10px;
      box-sizing: border-box;
      .alertPositionDialog_selfPositionBtn {
        width: 40px;
        height: 40px;
        background-image: url('~@/assets/images/location.png');
        background-size: 100% 100%;
        cursor: pointer;
      }
      .alertPositionDialog_selfPositionBtn:active {
        background-image: url('~@/assets/images/location_o.png');
      }
    }
  }
  .alertPositionDialog_content {
    width: 100%;
    height: 500px;
    float: left;
    .alertPositionDialog_map {
      width: 100%;
      height: 100%;
      float: left;
    }
  }
}
.equipmentInfo_dialog {
  width: 100%;
  .equipmentInfo_bg {
    max-height: 600px;
    width: 100%;
    overflow: hidden;
    overflow-y: scroll;
    .equipmentInfo_title {
      width: 100%;
      height: 38px;
      font-size: 16px;
      box-sizing: border-box;
      padding: 0 10px;
    }
    .equipmentInfo_text {
      color: #777;
    }
  }
}
.equipmentInfo_dialog .el-dialog__body {
  padding-right: 0px!important;
}
.dialogFooter {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}
</style>
